<template>
  <div>
    <!-- 渲染角色列表 -->
    <el-checkbox-group v-model="roleIds">
      <el-checkbox
        v-for="item in roleList"
        :key="item.id"
        :label="item.id "
      >{{ item.name }}</el-checkbox>

    </el-checkbox-group>
    <!-- 渲染角色列表 -->

    <el-row class="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="submitFn">确定</el-button>
        <el-button size="small" @click="cancleDialog">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getRoles } from '@/api/setting'
// 导入获取员工详情的 API
import { getUserDetailById } from '@/api/user'
// 给员工分配角色
import { assignRoles } from '@/api/employees'
export default {
  name: 'AssignRole',
  props: {
    // 父组件传过来的id
    userId: {
      required: true,
      type: String || Number
    }
  },
  data() {
    return {
      roleIds: [], // 保存当前选中的权限列表
      roleList: [] // 角色列表数据
    }
  },
  created() {
    // 调用员工列表数据
    this.getRolesFn()
    // 调用获取员工详情数据的方法
    this.getUserDetailByIdFn()
  },
  methods: {
    // 弹框确定按钮
    async submitFn() {
      const res = await assignRoles({ id: this.userId, roleIds: this.roleIds })
      console.log(res)
      this.$message.success(res.message)
      // 员工分配成功后,不用再刷新列表数据,因为数据都在子组件中,设置好后通知父组件关闭弹框就行
      this.$emit('close')
    },
    // 调用获取员工详情数据
    async  getUserDetailByIdFn() {
      const res = await getUserDetailById(this.userId)
      //   console.log(res)
      // 后端返回的数据有问题,没数据的话设置为空
      this.roleIds = res.data.roleIds === null ? [] : res.data.roleIds
    },
    // 获取员工角色列表数据
    async getRolesFn() {
      const res = await getRoles()
      //   console.log(res)
      this.roleList = res.data.rows
    },

    // 取消
    cancleDialog() {
      this.$emit('close')
    }
  }
}

</script>

<style>
   .footer {
     margin-top: 30px;
   }
</style>
